<template>
	<div class="checkbox-header">
		<h1 class="common-title checkbox-title">筛选标签</h1>
		<el-switch
			v-model="tagsFilter"
			active-text="取并集"
			inactive-text="取交集"
		/>
	</div>
	<el-checkbox-group @change="changeCheckBox" v-model="checkedTags">
		<el-checkbox v-for="tag in allTags" :key="tag" :label="tag" />
	</el-checkbox-group>

	<el-collapse v-model="activeNames" class="collapse-artist">
		<el-collapse-item name="1">
			<template #title>
				<div class="collapse-header">
					<h1 class="common-title">音频分类树表</h1>
					<el-button @click.stop="toggleExpandNodes">
						{{ expandAll ? "全部收起" : "全部展开" }}
					</el-button>
				</div>
			</template>
			<el-tree
				node-key="id"
				ref="treeRef"
				:data="tree.data"
				empty-text="暂无数据"
				@node-click="clickNode"
				:default-expand-all="expandAll"
			/>
		</el-collapse-item>

		<el-collapse-item name="2">
			<template #title>
				<div class="collapse-header">
					<h1 class="common-title">视频分类树表</h1>
				</div>
			</template>
			<video-list-tpl-vue
				:showDelete="false"
				:enableSearch="false"
				:tableData="videoData"
				@click="clickVideoItem"
			></video-list-tpl-vue>
		</el-collapse-item>
	</el-collapse>
</template>

<script lang="ts" setup>
import { ref, defineProps, computed } from "vue";
import { IMP3Data } from "@/utils/useRequest";
import { useRouter } from "vue-router";
import { sortStringArr } from "@/utils/common";
import { compareTags, genTreesByArtist, getAllTags, ITree } from "@/utils/tree";
import videoListTplVue from "../common/video-list-tpl.vue";
const props = defineProps<{
	tags: string[];
	data: IMP3Data[];
}>();

const router = useRouter();
const treeRef = ref(null);
const expandAll = ref(false);
const tagsFilter = ref(true);
const activeNames = ref(["1", "2"]);
const checkedTags = ref(props.tags);
const allTags = computed(() => sortStringArr(getAllTags(props.data)));
const mp3Data = computed(() =>
	props.data.filter((item) =>
		compareTags(props.tags, item.tags, tagsFilter.value)
	)
);
const tree = computed(() => genTreesByArtist(mp3Data.value));

const videoData = computed(() =>
	props.data
		.filter((item) => item.mediatype !== "AUDIO")
		.filter((item) => compareTags(props.tags, item.tags, tagsFilter.value))
);

function clickNode(data: ITree) {
	const { meta } = data;
	if (meta.key) {
		router.push({ path: "mp3", query: { key: meta.key } });
	}
}

function toggleExpandNodes() {
	expandAll.value = !expandAll.value;
	const nodesMap = (treeRef.value as any)?.store?.nodesMap as {
		[id: number]: {
			id: number;
			expanded: boolean;
		};
	};

	if (nodesMap) {
		Object.entries(nodesMap).forEach(([_, node]) => {
			node.expanded = expandAll.value;
		});
	}

	if (expandAll.value) {
		activeNames.value = ["1"];
	}
}

function changeCheckBox() {
	const tags = Object.values(checkedTags.value);
	router.push({ query: { tags } });
}

function clickVideoItem(value: { index: number; data: IMP3Data }) {
	const { key } = value.data;
	router.push({
		path: "mp4",
		query: { key },
	});
}
</script>

<style lang="less">
.checkbox-header {
	display: flex;
	align-items: center;
	.checkbox-title {
		margin-right: 20px;
		transform: translateY(-2px);
	}
}

.el-checkbox-group {
	margin-bottom: 20px;
}
.collapse-artist {
	.collapse-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.el-button {
			margin: 0;
			margin-right: 15px;
			@media screen and (max-width: 768px) {
				margin-right: 10px;
			}
		}
	}
}
</style>
